<!-- 角色管理 -->
<template>
	<div class="roleManage">
		<el-dialog :title="`新增${label}用户`" width="60%" :visible.sync="addRoleUserVisible" top="10vh"
			:close-on-click-modal="false">
			<div class="top">
				<el-form ref="form" label-width="100px">
					<el-row>
						<template v-if="label == '个人'">
							<el-col :span="10">
								<el-form-item label="用户名称">
									<el-input v-model.trim="userName" placeholder="请输入用户名称" @change="resetPage"
										@keyup.enter.native="search" size="mini"></el-input>
								</el-form-item>
							</el-col>
						</template>
						<template v-if="label == '机构'">
							<el-col :span="10">
								<el-form-item label="机构名称">
									<el-input v-model.trim="orgName" placeholder="请输入机构名称" @change="resetPage"
										@keyup.enter.native="search" size="mini">
									</el-input>
								</el-form-item>
							</el-col>
						</template>
						<template v-if="label == '机构'">
							<el-col :span="9">
								<el-form-item label="机构类别">
									<el-select :popper-append-to-body="false" v-model="orgTypeCode" clearable
										placeholder="请选择" @change="resetPage">
										<el-option v-for="item in custTypeList" :key="item.code" :label="item.name"
											:value="item.code">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</template>
						<el-col :span="5">
							<div class="btndiv">
								<el-button v-blur class="query" @click="search">查 询</el-button>
								<el-button v-blur class="reset" @click="reset">重 置</el-button>
							</div>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div class="tableDiv">
				<el-table stripe :data="tableData" @selection-change="userSelectionChange" row-key="arsId"
					style="border-radius: 6px" :header-cell-style="{
						color: '#333333', fontFamily: 'PingFang SC', fontSize: '14px', fontWeight: 500, background: '#F4F8FF',
					}">
					<el-table-column type="selection" width="35"></el-table-column>
					<el-table-column type="index" label="序号" width="45"></el-table-column>
					<el-table-column prop="userName" label="用户名称" width="200" v-if="label == '个人'"></el-table-column>
					<el-table-column prop="orgName" label="机构名称" width="280" v-if="label == '机构'"></el-table-column>
					<el-table-column prop="loginName" label="登录账号" width="75"></el-table-column>
					<el-table-column prop="dictNameResult.orgTypeCode" label="机构类别" v-if="label == '机构'">
					</el-table-column>
					<el-table-column prop="deptName" label="所属部门" v-if="label == '个人'"></el-table-column>
					<el-table-column prop="orgName" label="所属机构" v-if="label == '个人'"></el-table-column>
				</el-table>
			</div>
			<el-pagination style='text-align:right;margin-top: 10px;' @size-change="handleSizeChange"
				@current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 20, 30, 40]"
				:page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="recordsFiltered">
			</el-pagination>
			<span slot="footer" class="dialog-footer">
				<el-button v-blur class="added" @click="submit">提 交</el-button>
				<el-button v-blur class="query" @click="addRoleUserVisible = false">返 回</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import api from '@/api/systemManagement/RolesPermissions/roleManage.js'
	import '@/assets/queryPublic.css'
	export default {
		name: 'newUser',
		data() {
			return {
				custTypeList: [],
				addRoleUserVisible: false,
				pageNum: 1,
				pageSize: 10,
				recordsFiltered: 0,
				multipleSelection: [],
				label: '',
				tableData: [],
				form: {
					arId: '',
					auIds: '',
				},
				orgName: '', //机构用户名称
				userName: '', //个人用户名称
				orgTypeCode: '',
			}
		},
		mounted() {
			this.$publicApi.queryDictCommonResult('DG0443').then(res => {
				this.custTypeList = res.data.data
			})
		},
		methods: {
			show(r, id) {
				if (r) this.label = r;
				if (id) this.form.arId = id;
				this.GetList()
				this.addRoleUserVisible = true;

			},
			resetPage() {
				this.pageNum = 1;
			},
			search() {
				this.GetList()
			},
			reset() {
				this.pageNum = 1;
				this.orgName = ''
				this.userName = ''
				this.orgTypeCode = ''
				this.GetList()
			},
			GetList() {
				if (this.label == '机构') {
					let obj = {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						param: {
							orgName: this.orgName,
							orgTypeCode: this.orgTypeCode
						}
					}
					api.queryOrgUserAddRoleList(obj).then(res => {
						if (res.data && res.data.code == 200) {
							if (res.data.data) this.tableData = res.data.data;
							this.recordsFiltered = res.data.recordsFiltered;
						} else {
							this.$message.error(res.data.msg || res.message)
						}
					})
				} else if (this.label == '个人') {
					let obj = {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						param: {
							userName: this.userName
						}
					}
					api.queryIndvUserList(obj).then(res => {
						if (res.data && res.data.code == 200) {
							if (res.data.data) this.tableData = res.data.data;
							this.recordsFiltered = res.data.recordsFiltered;
						} else {
							this.$message.error(res.data.msg || res.message)
						}
					})
				}
			},
			userSelectionChange(val) {
				this.multipleSelection = val;
			},
			submit() {
				this.form.auIds = this.multipleSelection.map(it => it.userInfoNo).join();
				if (this.label == '机构') {
					api.saveOrgRoleUser(this.form).then(res => {
						if (res.data && res.data.code == 200) {
							this.$message.success('操作成功')
							this.$parent.GetList();
						} else {
							this.$message.error('操作失败')
						}
						this.addRoleUserVisible = false;
					})
				} else {
					api.saveIndvRoleUser(this.form).then(res => {
						if (res.data && res.data.code == 200) {
							this.$message.success('操作成功')
							this.$parent.GetList();
						} else {
							this.$message.error('操作失败')
						}
						this.addRoleUserVisible = false;
					})
				}
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.pageNum = 1;
				this.GetList()
			},
			handleCurrentChange(val) {
				this.pageNum = val;
				this.GetList()
			},

		}
	}
</script>

<style scoped lang='scss'>
	/* 滚动条 */
	::-webkit-scrollbar {
		width: 8px;
		height: 100%;
	}

	::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 5px;
		-webkit-box-shadow: inset 0 0 5px #F4F8FF;
		box-shadow: inset 0 0 5px #F4F8FF;
		background: #F4F8FF;
	}

	::-webkit-scrollbar-track {
		// -webkit-box-shadow: inset 0 0 5px rgba(14,54,94, 0.2);
		// box-shadow: inset 0 0 5px rgba(14,54,94, 0.2);
		// border-radius: 5px;
		// background: rgba(14,54,94, 0.1);
	}

	.tableDiv {
		width: 100%;
		height: calc(100% - 120px);
		overflow-y: scroll;
	}

	/deep/ .el-select-dropdown {
		position: absolute !important;
		top: 50px !important;
		left: 0 !important;
	}
</style>
